import { ref } from 'vue';
import './reset-element.scss';
import './common.scss';
import { ElButton } from 'element-plus';
import ZwUnityKitSelect from '../../src/ZwUnityKitSelect/Index.vue';

window.domainApi = 'https://payhub-api-dev.keyid.cn';

export default {
    title: 'Scrm System/ZwUnityKitSelect Library/ZwUnityKitSelect',
    component: ZwUnityKitSelect,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '选中的数据，默认为空，回显时传递对应的id值'
        },
        multiple: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否多选，默认为单选'
        },
        width: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '下拉框宽度，默认为360px'
        },
        option: {
            control: { type: 'array' },
            type: { name: 'array', required: false },
            description: '回显时传递的options，注意，里面的对象必须包含value和label，value为对应的id，label为显示名称'
        },
        selectType: {
            control: { type: 'radio' },
            type: { name: 'radio', required: false },
            options: ['profession', 'accountInfo'],
            description:
                '下拉选择类型，默认为空，此时，为常规select组件，可通过传递option选择下拉,若传此参数，则option自动失效  profession 所属行业  accountInfo 对公账号开户行信息'
        },
        placeholder: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: 'placeholder'
        },
        disabled: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否禁用'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitSelect },
    setup() {
        const change = val => {
            // console.log('val -  ', val);
        };
        return { args, change };
    },
    template: `
        <ZwUnityKitSelect v-bind="args" v-model="args.modelValue" @change="change" />
    `
});

/**
 *  默认演示
 */
export const Default = Template.bind({});
Default.args = {
    placeholder: '请选择XXX'
};

/**
 *  所属行业
 */
export const Profession = Template.bind({});
Profession.args = {
    selectType: 'profession'
};

/**
 *  对公账号开户行信息
 */
export const AccountInfo = Template.bind({});
AccountInfo.args = {
    selectType: 'accountInfo',
    placeholder: '请选择对公账号开户行信息'
};

/**
 *  对公账号开户行信息回显
 */
export const AccountInfoSelected = Template.bind({});
AccountInfoSelected.args = {
    selectType: 'accountInfo',
    placeholder: '请选择对公账号开户行信息',
    modelValue: '102100021981',
    option: [
        {
            value: '102100021981',
            label: '北京-北京市-中国工商银行股份有限公司北京西便门支行'
        }
    ]
};
